<template>
    <div class="comp-tabs">
        <template v-for="(tab, index) in tabs">
            <div class="tab" :key="index" :class="{ 'tab--disabled': disabled && tab !== $route.fullPath, 'tab--active': tab === $route.fullPath }" @click="onClickTab(tab)" v-if="tab && getTabAccess(tab)">{{ $router.title(tab) }}</div>
        </template>
    </div>
</template>

<script>
    import mixin from "../mixin";
    import { string, int } from "../util";
    export default {
        name: "comp-tabs",
        mixins: [mixin],
        props: {
            disabled: { type: Boolean, default: false },
            tabs: { type: Array, default: () => [] },
        },
        data: () => ({}),
        methods: {
            onClickTab(tab) {
                if (this.disabled) return;
                this.$router.replace(tab);
            },
            getTabAccess(tab) {
                let route = this.$router.match(tab);
                return route && !route.redirectedFrom ? this.access(route.name) : true;
            },
        },
    };
</script>

<style lang="scss">
    .comp-tabs {
        display: flex;
        align-items: center;
        border-bottom: solid 1px #eee;
        overflow: hidden;

        & > .tab {
            margin-right: 10px;
            padding: 0 10px 10px;
            height: 20px;
            color: #333;
            font-size: 16px;
            line-height: 20px;
            user-select: none;
            cursor: pointer;
        }

        & > .tab--disabled {
            color: #aaa;
            cursor: not-allowed;
        }

        & > .tab--active {
            border-bottom: solid 2px #1677ff;
            padding-bottom: 8px;
            color: #1677ff;
            font-weight: bold;
        }
    }
</style>